<template>
  <div class="box">
    <h1>Child:{{count}}</h1>
  </div>
</template>

<script>
/* 
      $root:当前组件树的根 Vue 实例
      我们可以借助这个$root做事件总线类似的传值方式
*/
export default {
  name: "Child",
  data() {
    return {
      count: 100
    }
  },

  mounted() {
    //同伙$root拿到Vue实例绑定自定义事件
    this.$root.$on("add" , (value) => {
      this.count += value
    })
  },

};
</script>

<style scoped>
.box {
  background: yellowgreen;
}
</style>
